<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="shortcut icon" href="favicon.ico" />
    <link rel="stylesheet" href="./js/layui/css/layui.css" />
    <link rel="stylesheet" href="./style/style.css" />
    <title>My website</title>
  </head>
  <body>
    <div class="layui-container container">
      <div class="title">
        <h1>
          <div>自我介绍</div>
        </h1>
      </div>
      <div
        class="m-img layui-anim layui-anim-rotate layui-anim-loop"
        style="position: absolute; top: -30px; left: -30px"
      >
        <img src="./images/outu.png" alt="..." width="100" />
      </div>
      <div class="layui-row line">
        <div class="layui-col-md6">
          <div class="layui-row line">
            <div class="layui-col-md3">照片(bushi)</div>
            <div class="layui-col-md9 m-img">
              <img src="./images/head.jpg" alt="..." width="250" />
            </div>
          </div>
        </div>
        <div class="layui-col-md6">
          <div class="layui-row line">
            <div class="layui-col-md3">我的姓名</div>
            <div class="layui-col-md9">陈辉</div>
          </div>
          <div class="layui-row line">
            <div class="layui-col-md3">我的班级</div>
            <div class="layui-col-md9">计科216</div>
          </div>
          <div class="layui-row line">
            <div class="layui-col-md3">我的学号</div>
            <div class="layui-col-md9">
              <span class="hiddenText">21181030201</span>
            </div>
          </div>
          <div class="layui-row line">
            <div class="layui-col-md3">电话</div>
            <div class="layui-col-md9">
              158 5572 <span class="hiddenText">6398</span>
            </div>
          </div>
          <div class="layui-row line">
            <div class="layui-col-md3">QQ</div>
            <div class="layui-col-md9">
              183489 <span class="hiddenText">3128</span>
            </div>
          </div>
          <div class="layui-row line">
            <div class="layui-col-md3">我的爱好</div>
            <div class="layui-col-md9">玩</div>
          </div>
        </div>
      </div>
    </div>
    <div class="loading-mark">
      <i
        class="layui-icon layui-icon-loading-1 layui-anim layui-anim-rotate layui-anim-loop"
        style="font-size: 35px"
      >
      </i>
      <div style="margin-top: 10px">加载中...</div>
    </div>
    <script src="./js/layui/layui.js"></script>
    <script>
      layui.use(["layer", "form"], function () {
        var layer = layui.layer,
          form = layui.form;
      });

      setTimeout(() => {
        let container = document.querySelector(".container");
        container.style.display = "block";

        let loadingMark = document.querySelector(".loading-mark");
        loadingMark.style.display = "none";

        container.classList.add("layui-anim");
        container.classList.add("layui-anim-scaleSpring");
      }, 1000);
    </script>
  </body>
</html>

